<template>
	<view class="container">
		<view class="search-area">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none"
				bg-color="#fff" @confirm="search" />
		</view>

		<view class="main-content">
			<view class="book">
				<view class="img">
					<image src="../../static/uni.png"></image>
				</view>
				<view class="content">
					<view class="bookheader">
						当前段位：高中英语
					</view>
					<view class="detail">
						<text class="know">熟知 2</text> | <text class="faint">模糊 30</text> |
						<text class="unknow">不熟 30</text> | <text class="nStart">未开始 1988</text>
					</view>
				<!-- 	<view class="">
						<view class="progress">

						</view>
					</view> -->
					<view class="total">
						总进度：32/19876
					</view>
				</view>
				<view class="button">
					<uni-icons type="list" size="30"></uni-icons>
				</view>
			</view>
			<view class="word">
				<view class="img">
					<image src="../../static/uni.png"></image>
				</view>
				<view class="content">
					已加入记忆单词（199）
				</view>
				<view class="button">
					<uni-icons type="list" size="30"></uni-icons>

				</view>
			</view>
		</view>
		<view class="wordBooks">
			<uni-section title="段位">
				<template v-slot:decoration>
					<view class="decoration"></view>
				</template>

				<uni-list-chat v-for="item in wordsBookList" :avatar-circle="true" :title="item.name"
					avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" :note="item.name"
					time="3356词"></uni-list-chat>
			

			</uni-section>
		</view>
	</view>
</template>

<script setup>
	
	import {getAllWordsBookList} from '@/api/wordsBook.js'
	
	let wordsBookList = ref([])
	
	onLoad(() => {
		getAllWordsBookList().then(res=>{
			wordsBookList.value = res.data;
		})
	})

</script>

<style lang="scss">
	.container {
		padding: 0 40rpx;
	}

	.main-content {
		display: flex;
		justify-content: inherit;
		flex-direction: column;
		margin: 10rpx 20rpx;
		padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;


		.book {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10rpx;
			border-bottom: 1px solid var(--line);

			.img {
				margin: auto 0;

				image {
					height: 60rpx;
					width: 60rpx;
				}
			}

			.content {
				width: 100%;
				margin-left: 30rpx;

				.detail {
					margin: 5rpx 0;
					font-size: 20rpx;

					.know {
						color: #3EFF00;
					}

					.faint {
						color: #C5CC02;
					}

					.unknow {
						color: orangered;
					}

					.nStart {
						color: var(--no-important);
					}
				}

				.total {
					font-size: 25rpx;
					color: #5c5c5c;
				}
			}

			.button {
				margin: auto 0;
			}
		}

		.word {
			display: flex;
			justify-content: space-between;
			padding-top: 20rpx;

			.img {
				margin: auto 0;

				image {
					height: 60rpx;
					width: 60rpx;
				}
			}

			.content {
				width: 100%;
				margin-left: 30rpx;
				line-height: 60rpx;
			}

			.button {
				margin: auto 0;
			}
		}

	}

	.wordBooks {
		margin: 10rpx 20rpx;
	}

	.decoration {
		width: 8rpx;
		height: 24rpx;
		margin-right: 6rpx;
		border-radius: 30%;
		background-color: #efd05a;
	}
</style>